<div class="layui-card">
    {block name='style'}{/block}
    {block name='header'}
    {notempty name='title'}
    <div class="layui-card-header notselect">
        <span class="layui-icon layui-icon-next font-s10 color-desc margin-right-5"></span>{$title|default=''}
        <div class="pull-right">{block name='button'}{/block}</div>
    </div>
    {/notempty}
    {/block}
    <div class="layui-card-body">
        <div class="layui-card-html">
            {block name='content'}{/block}
        </div>
        <div class="watermark"></div>
    </div>

    {block name='script'}
    <script>
        layui.use(['layer'], function() {
          var layer = layui.layer;

          // 获取屏幕宽度和高度
          var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
          var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

          // 计算水印文字的间距
          var spacing = 200; // 水印文字之间的间距（像素）

          // 计算需要生成水印文字的列数和行数
          var columnCount = Math.ceil(screenWidth / spacing);
          var rowCount = Math.ceil(screenHeight / spacing);

          // 动态生成水印文字
          var watermarkContainer = document.querySelector('.watermark');
          var watermarkText = "{$adminName}"; // 替换为实际的水印文字
          for (var i = 0; i < rowCount; i++) {
            for (var j = 0; j < columnCount; j++) {
              var watermarkElement = document.createElement('div');
              watermarkElement.classList.add('watermark-text');
              watermarkElement.style.top = spacing * i + 'px';
              watermarkElement.style.left = spacing * j + 'px';
              watermarkElement.innerText = watermarkText;
              watermarkContainer.appendChild(watermarkElement);
            }
          }
        });
    </script>
    {/block}
    <style>
        .watermark {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 9999;
            pointer-events: none;
            opacity: 0.2; /* 调整水印透明度 */

        }

        .watermark-text {
            position: absolute;
            top: 0;
            left: 0;
            transform: rotate(-45deg); /* 倾斜角度 */
            font-size: 18px; /* 调整水印文字大小 */
            color: rgba(0, 0, 0, 0.2); /* 调整水印文字颜色和透明度 */
            text-transform: uppercase; /* 调整水印文字大小写 */
            font-weight: bold; /* 调整水印文字粗细 */
            pointer-events: none;
        }
    </style>

</div>